<template>
  <div class="order-info">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>
      <el-descriptions title="订单详情" :column="3" :data="historyOrder">
        <el-descriptions-item label="订单编号">{{  historyOrder.id }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{parseTime( historyOrder.createTime,'{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="客户电话">{{  historyOrder.contactsPhone }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ parseTime( historyOrder.serveStartTime,'{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="服务人员电话">{{  historyOrder.servicerPhone }}</el-descriptions-item>
        <el-descriptions-item label="服务数量">{{  historyOrder.serviceQuantity }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{  historyOrder.ordersStatus }}</el-descriptions-item>
        <el-descriptions-item label="服务名称">{{  historyOrder.serveItemName }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{  historyOrder.contactsName }}</el-descriptions-item>
        <el-descriptions-item label="服务地址">{{  historyOrder.serveAddress }}</el-descriptions-item>
        <el-descriptions-item label="服务人员姓名">{{  historyOrder.servicerName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="支付记录" :column="3">
        <el-descriptions-item label="支付状态">{{  historyOrder.payStatus }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{  historyOrder.payMethod }}</el-descriptions-item>
        <el-descriptions-item label="支付金额">{{  historyOrder.payAmount }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { getHistoryOrders } from "@/api/historyOrders/historyOrders";
export default {
  name: "historyOrders",
  props: {
    id: {
      required: true,
    },
  },
  
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单列表表格数据
      searchList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 实际服务完成时间时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
        id: null, // 订单ID
        ordersStatus: null, // 订单状态
        payStatus: null, // 支付状态
        refundStatus: null, // 退款状态
        contactsPhone: null, // 客户电话
        startDate: null, // 订单开始日期
        endDate: null, // 订单结束日期
        createTime: null, // 创建时间
      },
      // 表单参数
      historyOrder: {},
    }
  },
  mounted(){
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 假设你的 API 调用是异步的，这里使用 axios 作为例子
      getHistoryOrders(this.id).then(response => {
        console.log(this.id)
        // 假设后端返回的数据结构是 { rows: [], total: 0 }
        console.log(response);
        this.historyOrder = response.data;
        this.total = response.total;
        this.loading = false;
      }).catch(error => {
        console.error("查询失败：", error);
        this.loading = false;
        // 这里可以添加错误处理，例如显示一个错误消息
      });
    },
  },
};
</script>

<style scoped>
.order-info {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
</style>